<template>
  <div class='NewsList'>
    <van-nav-bar
      :title="pageTitle"
      left-arrow
      @click-left="backHome"
    />
    <div class="NewsList-content">
      <van-tabs v-model="active" color="#0050A5" @click="tabsClick">
        <van-tab v-for="(tab, tabKey) in tabs"
                 :key="tabKey" :title="tab.title">


          <van-list
            v-model="tab.loading"
            :finished="tab.finished"
            finished-text="没有更多了"
            @load="onLoad"
            
          >
            <a :href="'/h5/#/newsDetail?newsId='+item.newsId"
              class="NewsList-content-item van-hairline--bottom"
              v-for="(item, index) in tab.child"
              :key="index">
              <div class="news-top">
                <div class="news-top-title van-ellipsis">{{item.title}}</div>
                <!-- <div v-if="item.isTop" class="isTop">置顶新闻</div>offset="100" -->
              </div>
              <div class="news-poster">
                <img :src="imgUrl+item.titleImg" alt="">
                <div class="news-poster-date">{{item.createTime}}</div>
              </div>
              <div class="news-content van-multi-ellipsis--l2">
                {{item.newsAbstract}}
              </div>
            </a>


          </van-list>
          

        </van-tab>
      </van-tabs>
    </div>
    <!-- <div class="home-more">
      <van-divider :style="{ color: '#0050A5', borderColor: '#BFBFBF', padding: '0 16px' }">查看更多</van-divider>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'NewsList',
  data () {
    return {
      imgUrl:config.imgUrl,
      pageTitle:'',
      active: 0,
      tabs: [
        {
          title: '新闻资讯',
          loading: false,
          finished: false,
          newsParam: {
            page: 0,
            pageSize: 20,
            category: 0
          },
          child:[]
        },
        {
          title: '协会动态',
          loading: false,
          finished: false,
          newsParam: {
            page: 0,
            pageSize: 20,
            category: 1
          },
          child:[]
          
        },
        {
          title: '行业公示',
          loading: false,
          finished: false,
          newsParam: {
            page: 0,
            pageSize: 20,
            category: 5
          },
          child:[]
        }
      ],
      newsCategory:0,
    }
  },
  methods: {
    backHome () {
      this.$router.back()
    },
    onLoad(){
      this.findNewsList();
    },
    tabsClick(index, title){
      this.pageTitle = title;
    },
    findNewsList(){
      this.tabs[this.active].newsParam.page++;
      this.$request({
        url: "/news/selectNewsList",
        method: "post",
        data: this.tabs[this.active].newsParam
      }).then(rsp => {
        if (rsp.code === 200) {
          if(this.tabs[this.active].newsParam.page === 1){
            this.tabs[this.active].child=rsp.data.list;
          }else{
            this.tabs[this.active].child.splice(-1,0,...rsp.data.list);
          }
          this.tabs[this.active].loading = false;
          if(this.tabs[this.active].child.length>=rsp.data.total){
            this.tabs[this.active].finished = true;
          }else{
            this.tabs[this.active].finished = false;
          }
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    }
  },
  mounted(){
    this.newsCategory = this.$route.query.newsCategory;
    if(this.newsCategory === 0){
      this.active = 0;
    }else if(this.newsCategory === 1){
      this.active = 1;
    }else if(this.newsCategory === 5){
      this.active = 2;
    }
    this.pageTitle = this.tabs[this.active].title;
    console.log(this.pageTitle);
  }
}
</script>

<style lang='scss'>
  @import "../assets/css/base";

  .NewsList {
    &-content{
      width: px2rem(690);
      margin: 0 auto;
      overflow: hidden;
      .van-hairline--top-bottom{
        border: none !important;
      }
      &-item{
        display: block;
        margin-top: px2rem(40);
        padding-bottom: px2rem(30);
        .news-top{
          width: 100%;
          @include flex();
          &-title{
            width: px2rem(400);
            font-size: px2rem(28);
            color: #000000;
            font-weight: 400;
            margin-left: px2rem(20);
          }
          &>.isTop{
            width: px2rem(140);
            background: url("../assets/img/news/top.png") left center no-repeat;
            background-size: px2rem(15) px2rem(17);
            box-sizing: border-box;
            padding-left: px2rem(30);
            font-size: px2rem(20);
            color: #ff0000;
          }
        }
        .news-poster{
          margin: px2rem(20) 0;
          position: relative;
          width: 100%;
          &>img{
            width: px2rem(690);
            height: px2rem(332px);
            border-radius: 5px;
            display: block;
          }
          &-date{
            position: absolute;
            bottom: 0;
            right: 0;
            width:px2rem(187);
            height:px2rem(35);
            background:rgba(0,0,0,0.5);
            border-radius:px2rem(10) 0 px2rem(10) 0;
            text-align: center;
            line-height: px2rem(35);
            font-size: px2rem(20);
            color: #ffffff;
          }
        }
        .news-content{
          width: 100%;
          font-size: px2rem(24);
          color: #848484;
          line-height: 1.7;
        }
      }
    }
  }
</style>
